<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "../jquery-1.7.2.js"></script>
    <script type = "text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $(":text:enabled").val("我是万能的程序员");
            })
            $("#btn2").click(function(){
                $(":text:disabled").val("管你呢，我就是万能的程序员");
            })
            $("#btn3").click(function(){
               alert( $(":checkbox:checked").length);
            })

            $("#btn4").click(function(){
                var a = $(":checkbox:checked");
                a.each(function(){
                    alert(this.value);
                })
            })

            $("#btn5").click(function(){
                var a = $("select option:selected");
                a.each(function(){
                    alert(this.innerHTML);
                })
            })
        })
    </script>
</head>
<body>
    <h3>表单对象属性过滤器</h3>
    <button id="btn1">对表单内 可用input 赋值操作.</button>
    <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
    <button id="btn3">获取多选框选中的个数.</button>
    <button id="btn4">获取多选框选中的内容.</button><br /><br />
    <button id="btn5">获取下拉框选中的内容.</button><br /><br />

    <form id = "form1" action = "#">
        可用元素：<input name =  "add" value = "可用文本框1" /><br>
        不可用元素：<input name = "email" value = "不可用文本框" disabled = "disabled"/><br/>
        可用元素：<input name = "che" value = "可用文本框2"/><br>
        不可用元素：<input name = "name" value = "不可用文本框" disabled = "disabled"/><br/><br/>

        复选框：<br>
        <input type = "checkbox" name = "newselect" value = "test1" checked = "checked"/>test1
        <input type = "checkbox" name = "newselect" value = "test2" />test2
        <input type = "checkbox" name = "newselect" value = "test3" />test3
        <input type = "checkbox" name = "newselect" value = "test4" checked = "checked"/>test4
        <input type = "checkbox" name = "newselect" value = "test5" />test5
        <br/><br/>
        下拉列表：<br/>
        <select id = "sele1" name = "test" multiple="multiple" style = "height:100px">
            <option>浙江</option>
            <option selected="selected">辽宁</option>
            <option>北京</option>
            <option selected="selected">天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <br/><br/>
        下拉列表：<br/>
        <select name="test2">
            <option>浙江</option>
            <option>辽宁</option>
            <option selected="selected">北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
    </form>
</body>
</html>